import React from "react"
import './SeatArea.less'
import {connect} from 'umi'
import { Popover } from "antd"
import Item from "antd/lib/list/Item"
import { iteratee } from "lodash"
const SeatArea = (props: any) => {
    const {list}=props
    let arr:Array<String> = []
    for (let first_num = 1; first_num < 11; first_num++) {
        let first_str=first_num.toString()
        if(first_str.length==1){
            first_str='0'+first_str
        }
        let second_str_set = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J']
        second_str_set.map((item) => {
            return arr.push(first_str+ item)
        })
    }
    console.log(list)
    let seat:any=[]
    arr.map((item:any)=>{
        seat.push({seat_no:item,ordered:false,idno:'',fullname:'',telephone:''})
    })
    console.log(seat)
    list.map((item:any)=>{
        let searchedObj=seat.filter((obj:any)=>(obj.seat_no==item.seat_no))[0]
        searchedObj.idno=item.idno
        searchedObj.fullname=item.fullname
        searchedObj.telephone=item.telephone
        //searchedObj={...searchedObj,idno:item.idno,fullname:item.fullname}
        return searchedObj.ordered=true
    })
    

    let listArr = seat.map((item:any,index:any) => {
        const content=(
            <div>
                <p>姓名:{item.fullname}</p>
                <p>联系电话:{item.telephone} </p>
                <p>身份证号:{item.idno}</p>
            </div>
        )
        if((index+1)%10==3 || (index+1)%10==7) 
        return (
                <div className="seat-aisle-box">
                {item.ordered?<Popover content={content} title="乘客信息"><div seat_no={item} className="seatItem-aisle ordered">{item.seat_no}</div></Popover>:<div seat_no={item} className="seatItem-aisle unordered">{item.seat_no}</div>}     
                <div className="aisle">过道</div>
                </div>
        )
        else return (item.ordered)?(<Popover content={content} title="乘客信息"><div seat_no={item} className="seatItem ordered">{item.seat_no}</div></Popover>):(<div seat_no={item} className="seatItem unordered">{item.seat_no}</div>)
    })
    return (
        <div className="seatBox">
            {listArr}
        </div>
    )
}
// export default SeatArea
const mapStateToProps=(state:any)=>({
    model:state.passengerInfo.current,
    list:state.passengerInfo.list
})
export default connect(mapStateToProps)(SeatArea)